import { defineStore } from "pinia";

export const useUserStore = defineStore("user", {
  state(): {
    menus: IMenu[];
  } {
    return {
      menus: [],
    };
  },
  getters: {
    // 生成一个 在 Nav.vue 里面用于生成 动态菜单的数组
    activeMenus() {
      // 1. 先找出所有的一级菜单
      const arr: IActiveMenu[] = this.menus.filter(
        (item) => item.parentId === 0
      );
      // 2. 找出所有对应的一级菜单的二级菜单，放到 1级菜单的 chidren 数组里面
      this.menus.forEach((item) => {
        // 找到我对应 1级菜单，把我就 1级的 children 里面的一个对象 , 并且 hidden 如果是 0 才是菜单
        const p = arr.find((p) => p.id === item.parentId && item.hidden === 0);
        if (p) {
          if (!p.children) {
            p.children = [];
          }
          p.children.push(item);
        }
      });

      // 上面的代码也是ok的，只是代码偏多，这里可以进行一下优化
      // 要有一定的规律才行： 1级菜单的id一定要 比对应的二级菜单的id要小
      // 比如： {id:1,title:"权限"}   , {id: 100, title: '用户列表'}
      // const arr = [
      //   { id: 100, title: "用户列表", parentId: 1 },
      //   { id: 1, title: "权限", parentId: 0 },
      // ];

      // const menus = [];
      // // 调整过后，小的id一定在前面，大的id一定在后面
      // arr.sort((a, b) => a.id - b.id).forEach((item) => {
      //   if (item.parentId === 0) {
      //     // 这就是一级菜单
      //     item.children = [];
      //     menus.push(item);
      //   } else {
      //     // 这些是二级菜单
      //     // 然后找到对应的一级菜单
      //     menus.find((p) => p.id === item.parentId).children.push(item);
      //   }
      // });
      // console.log(menus);

      return arr;
    },
  },
});
